<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-button type="primary" size="mini" @click="add">新增</el-button>
        </el-col>
      </el-row>

      <el-tree
        :data="treeData"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
      >
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span>
            <el-button
              v-if="data.parent_id == 0"
              type="primary"
              size="mini"
              @click="() => append(data)"
            >添加</el-button>
            <el-button
              v-if="data.parent_id != 0"
              type="warning"
              size="mini"
              @click="change(node, data)"
            >修改</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="() => remove(data)"
            >删除</el-button>
          </span>
        </span>
      </el-tree>
    </el-card>
    <el-dialog :visible.sync="formVisible" :title="dialogTitle">
      <el-form
        ref="formRef"
        label-width="100px"
        :rules="formRules"
        :model="formData"
      >
        <el-form-item label="上级科室" prop="parent_id">{{
          parentName
        }}</el-form-item>
        <el-form-item label="科室名称" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入科室名称"
            type="text"
          />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="submit">确 认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCategoryTree,
  createCategory,
  updateCategory,
  deleteCategory
} from '@/api/category/index'
export default {
  components: {},
  data() {
    return {
      dialogTitle: '新增',
      formVisible: false,
      formData: {
        name: '',
        parent_id: 0
      },
      id: 0, // update 用
      parentName: '',
      formRules: {
        name: {
          required: true,
          message: '请填写科室名称',
          trigger: 'blur'
        }
      },

      treeData: [],
      defaultProps: {
        children: 'sub',
        label: 'name'
      }
    }
  },
  created() {
    this.getTreeData()
  },
  methods: {
    async getTreeData() {
      const res = await getCategoryTree()
      this.treeData = res.data
    },
    // 添加顶级
    add() {
      this.formData.parent_id = 0
      this.parentName = '无'
      this.id = 0
      this.formVisible = true
    },
    // 添加下级的
    append(data) {
      this.dialogTitle = '新增'
      this.formVisible = true
      this.formData.parent_id = data.id
      this.parentName = data.name
      this.id = 0
    },
    change(node, data) {
      this.dialogTitle = '修改'
      this.formVisible = true
      this.parentName = node.parent.data.name
      this.formData.parent_id = data.parent_id
      this.formData.name = data.name
      this.id = data.id
    },
    remove(data) {
      this.id = data.id
      this.$confirm('是否确认删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await deleteCategory(this.id)
          if (res.code === 1) {
            this.getTreeData()
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(res => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    submit() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) {
          this.$message.error('请完善必填项')
        }
        let res = {}
        if (this.id !== 0) {
          res = await updateCategory(this.formData, this.id)
        } else {
          res = await createCategory(this.formData)
        }

        if (res.code === 1) {
          this.$message.success(res.msg)
          this.formVisible = false
          this.getTreeData()
        } else {
          this.$message.error(res.msg)
        }
        console.log(res)
      })
    }
  }
}
</script>

<style>
.video_img img {
  width: 150px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 10px;
}
.el-tree-node__content {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
  
}
</style>
